<template>
  <!-- 司伟奥，提交作业 -->

  <div>
    <UserAcatar class="header" />
    <div class="mydiv">
      <div class="left">
        <div class="select">
          <p class="font">选择科目：</p>
          <el-select v-model="value" placeholder="前端性能与工程化">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button class="btn" @click="toNew"
            ><i class="el-icon-s-promotion"></i>发布任务</el-button
          >
        </div>
        <div class="classmate">
          <p class="font1">班级成员</p>
          <el-input placeholder="搜索" v-model="keyword" class="searcher">
            <el-button slot="append" class="sbtn">
              <i class="el-icon-search"></i>
            </el-button>
          </el-input>
        </div>
        <div class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              prop="student"
              label="学生"
              width="180"
              class="pro"
            >
            </el-table-column>
            <el-table-column
              prop="studentid"
              label="学号"
              width="180"
              class="pro"
            >
            </el-table-column>
            <el-table-column prop="progress" label="任务完成度" class="pro">
            </el-table-column>
          </el-table>
          <el-pagination background layout="prev, pager, next" :total="1000">
          </el-pagination>
        </div>
      </div>
      <div class="right">
        <div id="myChart"></div>
        <div class="progress">
          各科任务发布情况：
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="70"
          ></el-progress>
          <el-progress
            :text-inside="true"
            :stroke-width="24"
            :percentage="100"
            status="success"
          ></el-progress>
          <el-progress
            :text-inside="true"
            :stroke-width="22"
            :percentage="80"
            status="warning"
          ></el-progress>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="50"
            status="exception"
          ></el-progress>
        </div>
      </div>
      <!-- <div></div> -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 引入echarts
import UserAcatar from "@/components/UserAcatar.vue"; //引入组件
export default {
  name: "Publish",
  components: {
    UserAcatar,
  },
  data() {
    return {
      tableData: [
        {
          student: "123",
          studentid: "123",
          progress: "20%",
        },
        {
          student: "123",
          studentid: "123",
          progress: "20%",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "hybrid",
        },
        {
          value: "选项2",
          label: "前端性能与工程化",
        },
        {
          value: "选项3",
          label: "web应用开发",
        },
      ],
      value: "",
      echartsOption: {
        // echarts选项，所有绘图数据和样式都在这里设置
        title: {
          text: "{b|80分}",
          subtext: "{a|现发布任务总分}",
          subtextStyle: {
            rich: {
              a: {
                fontSize: "8",
              },
            },
          },
          textStyle: {
            rich: {
              b: {
                fontSize: "18",
              },
            },
          },
          left: "center",
          top: "center",
        },
        legend: {
          //图表上方的图例
          data: ["任务一", "任务二", "任务三", "剩余"],
        },
        tooltip: {
          //鼠标放到图上的数据展示样式
          trigger: "axis",
        },
        series: [
          {
            name: "分数",
            type: "pie",
            radius: ["50%", "70%"],
            label: {
              normal: {
                show: true,

                formatter: "{b}: {c}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
              },
            },
            data: [
              // 扇形图数据格式： {value, name}
              { value: 0.35, name: "任务一" }, // value不一定是比例，echarts会自动转换
              { value: 0.2, name: "任务二" },
              { value: 0.25, name: "任务三" },
              { value: 0.2, name: "剩余" },
            ],
          },
        ],
      },
    };
  },
  methods: {
    toNew(){
      this.$router.push('/home/publishnew');
    }
  },
  mounted() {
    let myChart = echarts.init(document.getElementById("myChart"), "light"); // 初始化echarts, theme为light
    myChart.setOption(this.echartsOption); // echarts设置选项
  },
};
</script>
<style scoped>
.font {
  font-family: "华文楷体";
  font-size: 1.5em;
  color: #3f3f44;
  font-weight: 1.2em;
}
.font1 {
  font-family: "HarmonyOS Sans SC";
  font-size: 1.5em;
  text-decoration: #fc7f12 underline;
}
#myChart {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  margin-top: 5%;
}
.select {
  padding: 20px;
}
.classmate {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.header {
  width: 100%;
  height: 60px;
  border-bottom: 2px solid #bbb;
  background-color: rgb(245, 238, 238);
  display: flex;
  justify-content: right;
}
.mydiv {
  display: flex;
  flex-direction: row;
}
.left {
  padding: 20px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
}
.right {
  padding: 50px;
  margin-left: 100px;
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
}
.progress {
  width: 300px;
  margin-left: 70px;
  margin-top: 100px;
}
.searcher {
  width: 250px;
  margin-left: 75px;
  border: 1px solid #cceabb;
}
.btn {
  margin-left: 50px;
  background-color: #fdcb9e;
  border: 1px solid black;
  border-radius: 25%;
}
</style>